<template>
    <el-container class="content">
        <el-header :height="'auto'">
            <breadcrumb :title="'本院人员管理'" :noBack="true"></breadcrumb>
        </el-header>
        <el-main>
            <el-container class="white-block box full" v-loading="loading">
                <el-header :height="'auto'">
                    <div class="toolbar">
                        <div>
                            <el-input v-model="name" placeholder="请输入姓名或手机号" class="input"
                                      size="small"></el-input>
                            <el-select v-model="isMember" placeholder="本院人员" class="select" size="small">
                                <el-option
                                    v-for="item in isMemberOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <!--                            <el-select v-model="state" placeholder="状态" class="select" size="small">-->
                            <!--                                <el-option-->
                            <!--                                    v-for="item in stateOptions"-->
                            <!--                                    :key="item.value"-->
                            <!--                                    :label="item.label"-->
                            <!--                                    :value="item.value">-->
                            <!--                                </el-option>-->
                            <!--                            </el-select>-->
                            <el-select v-model="deptName" filterable placeholder="请选择科室" size="small" class="select"
                                       clearable>
                                <el-option
                                    v-for="item in deptList"
                                    :key="item.value"
                                    :label="item.name"
                                    :value="item.name">
                                </el-option>
                            </el-select>
                            <el-button class="primary" @click="getList(1)" size="small">查询</el-button>
                            <el-button class="minor" @click="reset()" size="small">重置</el-button>
                        </div>
                    </div>
                </el-header>
                <el-main class="mt10">
                    <table-example ref="table" :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                                   :stripe="true">
                        <template slot="type" slot-scope="scope">
                            <span v-if="scope.row.type>2">是</span>
                            <span v-else>否</span>
                        </template>
                        <template slot="disable" slot-scope="scope">
                            <span v-if="scope.row.disable==0">禁用</span>
                            <span v-if="scope.row.disable==1">启用</span>
                        </template>
                        <template slot="operation" slot-scope="scope">
                            <div class="operation">
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 2)">修改
                                </el-link>
                                <el-link type="primary" :underline="false" @click="approval(scope.row, 1)">删除
                                </el-link>
                            </div>
                        </template>
                    </table-example>
                </el-main>
                <el-footer :height="'auto'" class="mt20">
                    <page :data="page" @jumpPage="getList"></page>
                </el-footer>
            </el-container>
            <dialog-msk :show.sync="showEdit" ref="explainEdit" :title="'修改人员信息'" :width="'450px'"
                        @save="saveDialog" @cancel="closeDialog">
                <el-form class="form-common" :model="ruleForm" :rules="rules" ref="ruleForm"
                         size="small" label-width="80px" :label-position="'left'" v-if="currentList">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" size="small" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="cardId">
                        <el-input v-model="ruleForm.cardId" size="small" placeholder="请输入身份证号"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="phone">
                        <el-input v-model="ruleForm.phone" size="small" placeholder="请输入联系方式"></el-input>
                    </el-form-item>
                    <el-form-item label="科室" prop="deptName">
                        <!--                        <el-input v-model="ruleForm.deptName" size="small" placeholder="请输入姓名"></el-input>-->
                        <el-select v-model="ruleForm.deptName" filterable placeholder="请选择科室" class="full" size="small">
                            <el-option
                                v-for="item in deptList"
                                :key="item.value"
                                :label="item.name"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </dialog-msk>
        </el-main>
    </el-container>
</template>

<script>
    import tableExample from '../components/table'
    import page from '../components/pagination'
    import dialogMsk from '../components/dialog'
    import breadcrumb from '../components/breadcrumb'

    export default {
        data() {
            let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/,
                isRegIdCard = (rule, value, callback) => {
                    if (!regIdCard.test(value)) {
                        return callback(new Error('身份证号码在15-18位之间的数据'))
                    } else {
                        callback()
                    }
                },
                phone = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/,
                isPhone = (rule, value, callback) => {
                    if (!phone.test(value)) {
                        return callback(new Error('手机号码格式不正确'))
                    } else {
                        callback()
                    }
                }
            return {
                DirMigration: false,
                name: '', // 姓名
                deptName: '', // 部门名称
                stateOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '启用',
                        value: 1
                    },
                    {
                        label: '禁用',
                        value: 0
                    }
                ],
                isMemberOptions: [
                    {
                        label: '',
                        value: ''
                    },
                    {
                        label: '是',
                        value: 1
                    },
                    {
                        label: '否',
                        value: 0
                    }
                ],
                state: '', // 扫码权限
                isMember: '', // 扫码权限
                tableData: [],
                header: [
                    {
                        prop: 'name',
                        label: '姓名',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'cardId',
                        label: '身份证号',
                        minWidth: '150',
                        align: 'center'
                    },
                    {
                        prop: 'phone',
                        label: '联系方式',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'deptName',
                        label: '科室',
                        minWidth: '100',
                        align: 'center'
                    },
                    {
                        prop: 'addr',
                        label: '住址地区',
                        minWidth: '200',
                        align: 'center'
                    },
                    // {
                    //     prop: 'phone',
                    //     label: '详细地址',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    {
                        prop: 'type',
                        label: '是否本院人员',
                        minWidth: '100',
                        align: 'center'
                    },
                    // {
                    //     prop: 'phone',
                    //     label: '驾驶舱权限',
                    //     minWidth: '100',
                    //     align: 'center'
                    // },
                    // {
                    //     prop: 'disable',
                    //     label: '状态',
                    //     align: 'center',
                    //     minWidth: '100'
                    // },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '100',
                        fixed: 'right'
                    }
                ],
                slotColumns: ['type', 'disable', 'operation'],
                page: {},
                index: 1,
                loading: false,
                showEdit: false,
                currentList: null,
                ruleForm: {
                    name: '',
                    cardId: '',
                    phone: '',
                    deptName: ''
                },
                rules: {
                    name: [
                        {required: true, message: '请填写姓名', trigger: 'blur'}
                    ],
                    cardId: [
                        {required: true, message: '请填写身份证号', trigger: 'blur'},
                        {validator: isRegIdCard}
                    ],
                    phone: [
                        {required: true, message: '请填写联系方式', trigger: 'blur'},
                        {validator: isPhone}
                    ],
                    deptName: [
                        {required: true, message: '请选择科室', trigger: 'blur'}
                    ]
                },
                deptList: []
            }
        },
        mounted() {
            this.getDept()
            this.getList()
        },
        methods: {
            getDept() {
                this.$http.get('/thisCourt/hsDepartmentData').then(result => {
                    if (result.success) {
                        this.deptList = result.data
                    }
                })
            },
            // 获取列表数据
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/thisCourt/getPersonPageList', {
                    nameOrPhone: this.name,
                    state: this.state,
                    type: this.isMember,
                    deptName: this.deptName,
                    current: this.index || 1,
                    size: 15
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.page = result.data
                        delete this.page['records']
                    }
                }).catch(() => {
                    this.loading = false
                })
            },
            // 重置操作
            reset() {
                this.name = ''
                this.state = ''
                this.isMember = ''
                this.deptName = ''
                this.getList(1)
            },
            approval(row, type) {
                let _this = this
                if (type === 1) {
                    this.$method.messageBox('confirm', '是否删除该用户', (action, instance) => {
                        if (action === 'confirm') {
                            _this.$http.post('/thisCourt/delPersonnel', {
                                id: row.id
                            }).then(result => {
                                _this.getList()
                            })
                        }
                    }, '', false, false)
                } else if (type === 2) {
                    this.currentList = row
                    this.ruleForm = {
                        name: row.name,
                        cardId: row.cardId,
                        phone: row.phone,
                        deptName: row.deptId
                    }
                    this.showEdit = true
                }
            },
            saveDialog() {
                let _this = this
                this.validate('ruleForm', () => {
                    this.submit(function () {
                        _this.closeDialog()
                    })
                })
            },
            closeDialog() {
                this.$refs.ruleForm.resetFields()
                this.ruleForm = {
                    name: '',
                    cardId: '',
                    phone: '',
                    deptName: ''
                }
                this.currentList = null
                this.showEdit = false
            },
            validate(formName, callback) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if (callback) callback()
                    } else {
                        return false
                    }
                })
            },
            submit(callback) {
                let form = this.ruleForm
                this.$http.post('/thisCourt/updatePersonnel', {
                    hsDepartmentId: form.deptName,
                    id: this.currentList.id,
                    name: form.name,
                    cardId: form.cardId,
                    phone: form.phone
                }).then(result => {
                    if (result.success) {
                        this.getList()
                        this.$message.success({
                            message: '修改信息成功',
                            showClose: true
                        })
                    }
                    if (callback) callback()
                })
            }
        },
        components: {
            tableExample,
            page,
            dialogMsk,
            breadcrumb
        }
    }
</script>

<style scoped lang="less">

</style>
